<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中数元宇 - 智能MR眼镜</title>
    <link href="static/css/tailwind.min.css" rel="stylesheet">
    <!-- GSAP和ScrollTrigger -->
    <script src="static/js/gsap.min.js"></script>
    <script src="static/js/ScrollTrigger.min.js"></script>
    <!-- 自定义样式 -->
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
        
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #0a0a0a;
            color: #ffffff;
            overflow-x: hidden;
        }
        
        #main-nav {
            background-color: rgba(0, 0, 0, 0.70);
            backdrop-filter: blur(10px); /* 可选：保留类似之前的毛玻璃效果 */
        }
        
        .section {
            /* min-height: 100vh; */ /* 移除或注释掉这里的通用最小高度，或在#about中覆盖 */
            position: relative;
            overflow: hidden;
        }
        
        /* About区块和Banner的相关样式 */
        #banner {
            height: 100vh;
            width: 100%;
            position: relative;
            overflow: hidden;
        }
        
        .banner-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        #about {
            min-height: auto; /* 关键修改：允许高度自适应内容 */
            margin-top: 0; /* 确保没有外边距 */
            padding-top: 0; /* 取消顶部内边距 */
        }
        
        .progress-bar {
            position: fixed;
            top: 0;
            left: 0;
            height: 4px;
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            z-index: 1000;
        }
        
        .svg-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        .svg-animation {
            width: 100%;
            height: 100vh;
            overflow: visible;
        }
        
        .pin-spacer {
            position: relative;
            overflow: hidden;
        }
        
        .drone-path {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
        }
        
        .drone-element {
            transform-origin: center;
            opacity: 0;
        }
        
        .scene-text {
            position: absolute;
            font-size: 1.5rem;
            font-weight: 300;
            opacity: 0;
            color: white;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
            z-index: 10;
        }
        
        .features-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transform: translateY(50px);
            opacity: 0;
        }
        
        .accordion-item {
            background: rgba(255, 255, 255, 0.03);
            border-radius: 8px;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        
        .accordion-item.active .accordion-content {
            max-height: 300px;
        }
        
        /* 轮播图样式 - 以下相关样式将被移除或不再使用 */
        /*
        .banner-slider {
            position: relative;
            width: 100%;
            height: 80vh;
            overflow: hidden;
        }
        
        .banner-slide {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            background-color: #0a0a0a;
        }
        
        .banner-slide.active {
            opacity: 1;
        }
        
        .banner-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 2rem;
            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
            color: white;
            transform: translateY(20px);
            opacity: 0;
            transition: all 0.8s ease;
        }
        
        .banner-slide.active .banner-content {
            transform: translateY(0);
            opacity: 1;
        }
        
        .banner-indicators {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 10;
        }
        
        .banner-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            cursor: pointer;
            transition: background 0.3s ease;
        }
        
        .banner-indicator.active {
            background: #3b82f6;
        }
        
        .banner-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(0,0,0,0.3);
            color: white;
            cursor: pointer;
            transition: background 0.3s ease;
            z-index: 10;
        }
        
        .banner-nav:hover {
            background: rgba(0,0,0,0.6);
        }
        
        .banner-prev {
            left: 20px;
        }
        
        .banner-next {
            right: 20px;
        }
        */
        
        @media (max-width: 768px) {
            .section {
                padding: 2rem 1rem;
            }
            .scene-text {
                font-size: 1rem;
                max-width: 80%;
            }
            /* .banner-slider {
                height: 60vh;
            } */ /* 轮播图相关，已移除 */
            
            /* 手机端Banner图片设置 */
            #banner {
                height: 100vh; /* 保持100vh以确保全屏显示 */
                background-image: url('banner-phone.jpg'); /* 手机端背景图片 */
                background-size: cover; /* 修改为cover以填充整个容器 */
                background-position: center center; /* 确保图片居中 */
                min-height: 100vh; /* 添加最小高度确保内容不会被压缩 */
            }
            
            /* 添加额外的媒体查询以处理更小的屏幕 */
            @media (max-width: 480px) {
                #banner {
                    background-position: center center;
                    background-size: cover;
                }
            }
        }
        
        /* Logo文字样式 */
        .logo-text {
            cursor: pointer;
            transition: all 0.5s ease;
            font-family: 'Noto Sans SC', Arial, sans-serif;
            letter-spacing: 1px;
            text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        
        .logo-text:hover {
            letter-spacing: 2px;
        }
        
        /* 动画样式 */
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        /* 加载动画样式 */
        #loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }
        
        .loading-logo {
            width: 120px;
            height: 120px;
            position: relative;
            margin-bottom: 30px;
        }
        
        .glasses-outline {
            stroke-dasharray: 300;
            stroke-dashoffset: 300;
            animation: draw 2s ease-in-out infinite alternate;
        }
        
        @keyframes draw {
            0% { stroke-dashoffset: 300; }
            60% { stroke-dashoffset: 0; }
            100% { stroke-dashoffset: 0; }
        }
        
        .loading-text {
            font-size: 18px;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.8);
            margin-top: 20px;
            letter-spacing: 2px;
        }
        
        .loading-bar {
            width: 200px;
            height: 4px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 2px;
            overflow: hidden;
            margin-top: 15px;
        }
        
        .loading-progress {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            animation: progress 2.5s ease-in-out infinite;
        }
        
        @keyframes progress {
            0% { width: 0%; }
            50% { width: 70%; }
            70% { width: 80%; }
            90% { width: 90%; }
            100% { width: 95%; }
        }
        
        /* 自定义视频播放按钮 */
        .video-container {
            position: relative;
        }
        
        .custom-play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 80px;
            background-color: rgba(59, 130, 246, 0.8);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            transition: all 0.3s ease;
        }
        
        .custom-play-button:hover {
            background-color: rgba(59, 130, 246, 1);
            transform: translate(-50%, -50%) scale(1.1);
        }
        
        .custom-play-button svg {
            width: 30px;
            height: 30px;
            margin-left: 5px; /* 稍微偏右一点让三角形居中 */
        }
        
        .video-playing .custom-play-button {
            opacity: 0;
            pointer-events: none;
        }
        #responsive-min-height {
            min-height: 400px; /* 默认值，适用于PC端 */
        }

        /* 当屏幕宽度小于768px时（手机端） */
        @media (max-width: 767px) {
            #responsive-min-height {
                min-height: 200px; /* 手机端的值 */
            }
        }
    </style>
</head>
<body>
    <!-- 加载动画 -->
    <div id="loading-screen">
        <div class="loading-logo">
            <svg viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg">
                <!-- 眼镜轮廓 -->
                <path class="glasses-outline" 
                      d="M5,25 C10,15 35,15 45,25 L55,25 C65,15 90,15 95,25 C95,30 90,35 80,35 
                         C70,35 65,30 65,25 L35,25 C35,30 30,35 20,35 C10,35 5,30 5,25 Z" 
                      fill="none" stroke="url(#loading-gradient)" stroke-width="2" />
                
                <!-- 渐变定义 -->
                <linearGradient id="loading-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" stop-color="#3b82f6" />
                    <stop offset="100%" stop-color="#8b5cf6" />
                </linearGradient>
                
                <!-- 眼镜镜片 -->
                <circle cx="20" cy="25" r="10" fill="rgba(59, 130, 246, 0.3)" />
                <circle cx="80" cy="25" r="10" fill="rgba(139, 92, 246, 0.3)" />
            </svg>
        </div>
        <div class="loading-bar">
            <div class="loading-progress"></div>
        </div>
        <div class="loading-text">中数元宇-企业服务载入中...</div>
    </div>

    <!-- 进度条 -->
    <div class="progress-bar"></div>
    
    <!-- 导航栏 -->
    <nav class="fixed top-0 left-0 w-full z-50 transition-all duration-300" id="main-nav">
        <div class="container mx-auto px-6 py-4 flex justify-between items-center">
            <div class="flex items-center">
                <img src="logo-white1.png" alt="中数元宇" class="h-12 mr-3">
                <span class="text-xl font-bold">中数元宇</span>
            </div>
            <div class="hidden md:flex space-x-8">
                <a href="#banner" class="text-white hover:text-blue-400 transition">首页</a>
                <a href="#about" class="text-white hover:text-blue-400 transition">解决方案</a>
                <a href="#features" class="text-white hover:text-blue-400 transition">服务</a>
                <a href="#contact" class="text-white hover:text-blue-400 transition">联系我们</a>
            </div>
            <div class="md:hidden">
                <button id="mobile-menu-button" class="text-white focus:outline-none">
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>
            </div>
        </div>
        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="hidden bg-gray-900 md:hidden">
            <div class="px-6 py-4 space-y-4">
                <a href="#banner" class="block text-white hover:text-blue-400 transition">首页</a>
                <a href="#about" class="block text-white hover:text-blue-400 transition">解决方案</a>
                <a href="#features" class="block text-white hover:text-blue-400 transition">服务</a>
                <a href="#contact" class="block text-white hover:text-blue-400 transition">联系我们</a>
            </div>
        </div>
    </nav>
    
    <!-- Banner轮播区块 -->
    <section id="banner" class="section">
        <video class="banner-video" autoplay loop muted playsinline>
            <source src="https://chimeta-resources.oss-cn-hangzhou.aliyuncs.com/website/static/banner.mp4" type="video/mp4">
            您的浏览器不支持视频播放。
        </video>
    </section>

    <!-- Hero区块 - SVG动画序列 -->
    <section id="hero" class="section" style="min-height: 0; display: none;">
        <div class="pin-spacer" id="hero-animation">
            <div class="svg-container">
                <svg class="svg-animation" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid meet">
                    <!-- 背景层 -->
                    <defs>
                        <linearGradient id="bg-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" stop-color="#0f172a" />
                            <stop offset="100%" stop-color="#1e293b" />
                        </linearGradient>
                        <radialGradient id="glow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
                            <stop offset="0%" stop-color="#3b82f6" stop-opacity="0.8" />
                            <stop offset="100%" stop-color="#1e40af" stop-opacity="0" />
                        </radialGradient>
                        
                        <!-- 无人机路径遮罩 -->
                        <clipPath id="scene-clip">
                            <rect id="clip-rect" x="0" y="0" width="0" height="1080" />
                        </clipPath>
                        
                        <!-- 无人机模型 -->
                        <g id="drone-model">
                            <path d="M50,0 L70,20 L50,40 L30,20 Z" fill="#64748b" class="drone-element" />
                            <circle cx="50" cy="20" r="10" fill="#0ea5e9" class="drone-element" />
                            <rect x="35" y="15" width="30" height="10" rx="5" fill="#334155" class="drone-element" />
                            <circle cx="50" cy="20" r="3" fill="#f8fafc" class="drone-element" />
                            <!-- 螺旋桨 -->
                            <g class="drone-propellers">
                                <line x1="25" y1="0" x2="25" y2="40" stroke="#94a3b8" stroke-width="2" class="drone-element" />
                                <line x1="75" y1="0" x2="75" y2="40" stroke="#94a3b8" stroke-width="2" class="drone-element" />
                                <ellipse cx="25" cy="5" rx="15" ry="3" fill="#94a3b8" class="drone-element propeller" />
                                <ellipse cx="75" cy="5" rx="15" ry="3" fill="#94a3b8" class="drone-element propeller" />
                                <ellipse cx="25" cy="35" rx="15" ry="3" fill="#94a3b8" class="drone-element propeller" />
                                <ellipse cx="75" cy="35" rx="15" ry="3" fill="#94a3b8" class="drone-element propeller" />
                            </g>
                        </g>
                    </defs>
                    
                    <!-- 背景 -->
                    <rect width="1920" height="1080" fill="url(#bg-gradient)" />
                    
                    <!-- 网格层 -->
                    <g id="grid-layer" opacity="0.2">
                        <!-- 动态生成的网格线 -->
                    </g>
                    
                    <!-- 光晕效果 -->
                    <circle id="glow-effect" cx="960" cy="540" r="0" fill="url(#glow)" opacity="0" />
                    
                    <!-- 场景1: 无人机轮廓动画 -->
                    <g id="scene-1">
                        <!-- 无人机飞行路径 -->
                        <path id="drone-path-1" class="drone-path" d="M200,540 C400,340 800,640 1200,440 S1600,640 1800,540" 
                              fill="none" stroke="#3b82f6" stroke-width="2" />
                        
                        <!-- 使用克隆的无人机模型 -->
                        <use id="drone-1" href="#drone-model" x="0" y="0" transform="translate(200, 540) scale(0.8)" />
                        
                        <!-- 文本标签 -->
                        <text id="scene1-title" x="960" y="200" text-anchor="middle" fill="white" font-size="48" opacity="0">
                            中数元宇无人机
                        </text>
                        <text id="scene1-subtitle" x="960" y="260" text-anchor="middle" fill="#e2e8f0" font-size="24" opacity="0">
                            重新定义天空视角
                        </text>
                    </g>
                    
                    <!-- 场景2: 无人机特性展示 -->
                    <g id="scene-2" opacity="0">
                        <!-- 技术线条框架 -->
                        <g id="tech-frame">
                            <path d="M400,300 L500,300 L500,400 L400,400 Z" fill="none" stroke="#38bdf8" stroke-width="2" class="tech-line" />
                            <path d="M1400,300 L1500,300 L1500,400 L1400,400 Z" fill="none" stroke="#38bdf8" stroke-width="2" class="tech-line" />
                            <path d="M400,700 L500,700 L500,800 L400,800 Z" fill="none" stroke="#38bdf8" stroke-width="2" class="tech-line" />
                            <path d="M1400,700 L1500,700 L1500,800 L1400,800 Z" fill="none" stroke="#38bdf8" stroke-width="2" class="tech-line" />
                            
                            <line x1="500" y1="350" x2="960" y2="350" stroke="#38bdf8" stroke-width="2" stroke-dasharray="5,5" class="tech-line" />
                            <line x1="960" y1="350" x2="1400" y2="350" stroke="#38bdf8" stroke-width="2" stroke-dasharray="5,5" class="tech-line" />
                            <line x1="500" y1="750" x2="960" y2="750" stroke="#38bdf8" stroke-width="2" stroke-dasharray="5,5" class="tech-line" />
                            <line x1="960" y1="750" x2="1400" y2="750" stroke="#38bdf8" stroke-width="2" stroke-dasharray="5,5" class="tech-line" />
                        </g>
                        
                        <!-- 中央无人机 -->
                        <use id="drone-2" href="#drone-model" x="0" y="0" transform="translate(960, 540) scale(1.5)" />
                        
                        <!-- 特性标记点 -->
                        <g id="feature-points">
                            <circle cx="450" cy="350" r="8" fill="#f43f5e" class="feature-point" />
                            <circle cx="1450" cy="350" r="8" fill="#f43f5e" class="feature-point" />
                            <circle cx="450" cy="750" r="8" fill="#f43f5e" class="feature-point" />
                            <circle cx="1450" cy="750" r="8" fill="#f43f5e" class="feature-point" />
                            
                            <text x="450" y="320" text-anchor="middle" fill="white" font-size="18" class="feature-text">4K高清摄像</text>
                            <text x="1450" y="320" text-anchor="middle" fill="white" font-size="18" class="feature-text">40分钟续航</text>
                            <text x="450" y="720" text-anchor="middle" fill="white" font-size="18" class="feature-text">智能避障</text>
                            <text x="1450" y="720" text-anchor="middle" fill="white" font-size="18" class="feature-text">远程控制</text>
                        </g>
                    </g>
                    
                    <!-- 场景3: 数据可视化 -->
                    <g id="scene-3" opacity="0">
                        <!-- 数据网格背景 -->
                        <g id="data-grid">
                            <!-- 将在JS中动态生成 -->
                        </g>
                        
                        <!-- 中央数据圆环 -->
                        <circle id="data-ring-outer" cx="960" cy="540" r="200" fill="none" stroke="#3b82f6" stroke-width="4" stroke-dasharray="1256 1256" stroke-dashoffset="1256" />
                        <circle id="data-ring-inner" cx="960" cy="540" r="150" fill="none" stroke="#8b5cf6" stroke-width="4" stroke-dasharray="942 942" stroke-dashoffset="942" />
                        
                        <!-- 数据指标 -->
                        <g id="data-metrics">
                            <g id="metric-1" transform="translate(700, 440)">
                                <rect width="150" height="80" rx="10" fill="rgba(59, 130, 246, 0.2)" stroke="#3b82f6" stroke-width="2" />
                                <text x="75" y="30" text-anchor="middle" fill="white" font-size="18">飞行速度</text>
                                <text x="75" y="60" text-anchor="middle" fill="#3b82f6" font-size="24">120 km/h</text>
                            </g>
                            <g id="metric-2" transform="translate(1070, 440)">
                                <rect width="150" height="80" rx="10" fill="rgba(139, 92, 246, 0.2)" stroke="#8b5cf6" stroke-width="2" />
                                <text x="75" y="30" text-anchor="middle" fill="white" font-size="18">最大高度</text>
                                <text x="75" y="60" text-anchor="middle" fill="#8b5cf6" font-size="24">500 m</text>
                            </g>
                            <g id="metric-3" transform="translate(700, 560)">
                                <rect width="150" height="80" rx="10" fill="rgba(59, 130, 246, 0.2)" stroke="#3b82f6" stroke-width="2" />
                                <text x="75" y="30" text-anchor="middle" fill="white" font-size="18">控制范围</text>
                                <text x="75" y="60" text-anchor="middle" fill="#3b82f6" font-size="24">7 km</text>
                            </g>
                            <g id="metric-4" transform="translate(1070, 560)">
                                <rect width="150" height="80" rx="10" fill="rgba(139, 92, 246, 0.2)" stroke="#8b5cf6" stroke-width="2" />
                                <text x="75" y="30" text-anchor="middle" fill="white" font-size="18">电池容量</text>
                                <text x="75" y="60" text-anchor="middle" fill="#8b5cf6" font-size="24">5200 mAh</text>
                            </g>
                        </g>
                    </g>
                </svg>
            </div>
            
            <!-- 场景文本描述 -->
            <div class="scene-text" id="text-1" style="top: 70%; left: 10%;">
                探索无人机的未来，见证科技的力量
            </div>
            <div class="scene-text" id="text-2" style="top: 20%; right: 10%;">
                先进功能，满足专业需求
            </div>
            <div class="scene-text" id="text-3" style="top: 75%; right: 10%;">
                数据驱动，性能卓越
            </div>
            
            <!-- 动画进度指示器 -->
            <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 z-20">
                <div class="flex space-x-2">
                    <div class="w-16 h-1 rounded-full bg-gray-700 overflow-hidden">
                        <div class="h-full w-0 bg-blue-500" id="progress-1"></div>
                    </div>
                    <div class="w-16 h-1 rounded-full bg-gray-700 overflow-hidden">
                        <div class="h-full w-0 bg-blue-500" id="progress-2"></div>
                    </div>
                    <div class="w-16 h-1 rounded-full bg-gray-700 overflow-hidden">
                        <div class="h-full w-0 bg-blue-500" id="progress-3"></div>
                    </div>
                </div>
                <div class="text-center text-sm text-gray-400 mt-2" id="scene-indicator">场景1: 无人机介绍</div>
            </div>
        </div>
    </section>

    <!-- About区块 - SVG图案动画 -->
    <section id="about" class="section bg-gray-900">
        <!-- 删除原始的SVG容器 -->
        
        <div class="container mx-auto px-6 pt-12 pb-12 relative z-10">
            <div class="flex flex-wrap items-center">
                <div class="w-full lg:w-1/2 mb-12 lg:mb-0">
                    <h2 class="text-4xl font-bold mb-6 opacity-0 transform translate-y-20" id="about-title">
                        <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">
                            MR（混合现实）卡牌桌游软硬件解决方案
                        </span>
                    </h2>
                    <div class="text-lg text-gray-300 space-y-4 opacity-0 transform translate-y-20" id="about-text">
                        <p>·实体卡牌+MR沉浸式的玩法，让卡牌的内容生动地具象化在混合现实的场景中；</p>
                        <p>·裸手交互、语音AI让用户可以和喜爱的角色进行更亲密的交互，深化情感陪伴；</p>
                        <p>·打造用户专属的实体卡牌，和数字资产绑定的稀有卡牌，提升收藏价值；</p>
                        <p>·多人可在同一物理空间中互动对战或合作，让桌游的桌面变成任意场景，一桌一世界；</p>
                        <p>·先进的技术为您的IP激发新活力，在全新蓝海市场中提升竞争价值。</p>
                    </div>
                    <div class="mt-8 opacity-0 transform translate-y-20" id="about-btn">
                        <a href="#features" class="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-8 py-3 rounded-lg inline-block font-medium hover:shadow-lg transition-all duration-300">
                            了解我们的服务
                        </a>
                    </div>
                </div>
                <div class="w-full lg:w-1/2 lg:pl-12 relative" id="responsive-min-height">
                    <!-- SVG视图框 -->
                    <div class="absolute top-0 left-0 w-full h-full">
                        <svg viewBox="0 0 600 420" class="w-full h-full" preserveAspectRatio="xMidYMid meet">
                            <!-- 定义渐变和效果 -->
                            <defs>
                                <linearGradient id="vr-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                                    <stop offset="0%" stop-color="#0866ff" />
                                    <stop offset="50%" stop-color="#3b82f6" />
                                    <stop offset="100%" stop-color="#8b5cf6" />
                                </linearGradient>
                                
                                <linearGradient id="text-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                                    <stop offset="0%" stop-color="#0866ff" />
                                    <stop offset="50%" stop-color="#3b82f6" />
                                    <stop offset="100%" stop-color="#8b5cf6" />
                                </linearGradient>
                                
                                <filter id="text-shadow" x="-20%" y="-20%" width="140%" height="140%">
                                    <feGaussianBlur in="SourceAlpha" stdDeviation="8" />
                                    <feOffset dx="2" dy="2" result="offsetblur" />
                                    <feComponentTransfer>
                                        <feFuncA type="linear" slope="0.3" />
                                    </feComponentTransfer>
                                    <feMerge>
                                        <feMergeNode />
                                        <feMergeNode in="SourceGraphic" />
                                    </feMerge>
                                </filter>
                                
                                <radialGradient id="glow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
                                    <stop offset="0%" stop-color="#3b82f6" stop-opacity="0.8" />
                                    <stop offset="100%" stop-color="#1e40af" stop-opacity="0" />
                                </radialGradient>
                            </defs>
                            
                            <!-- VR眼镜主体 -->
                            <g id="vr-glasses" transform="translate(300, 210) scale(0.6)" opacity="0">
                                <!-- 眼镜框架 -->
                                <path id="vr-frame" d="M-300,-50 C-270,-120 270,-120 300,-50 L300,30 C270,100 -270,100 -300,30 Z" 
                                      fill="none" stroke="url(#vr-gradient)" stroke-width="4" 
                                      stroke-dasharray="1600" stroke-dashoffset="1600" />
                                
                                <!-- 左镜片 -->
                                <ellipse id="left-lens" cx="-150" cy="0" rx="120" ry="80" 
                                        fill="none" stroke="#3b82f6" stroke-width="3" 
                                        stroke-dasharray="650" stroke-dashoffset="650" opacity="0.8" />
                                
                                <!-- 右镜片 -->
                                <ellipse id="right-lens" cx="150" cy="0" rx="120" ry="80" 
                                        fill="none" stroke="#8b5cf6" stroke-width="3" 
                                        stroke-dasharray="650" stroke-dashoffset="650" opacity="0.8" />
                                
                                <!-- 鼻梁 -->
                                <path id="nose-bridge" d="M-30,-10 L30,-10" 
                                      stroke="#0ea5e9" stroke-width="4" 
                                      stroke-dasharray="60" stroke-dashoffset="60" />
                                
                                <!-- 头带 -->
                                <path id="head-strap" d="M-290,-40 C-350,-40 -350,40 -290,40 M290,-40 C350,-40 350,40 290,40" 
                                      stroke="#0ea5e9" stroke-width="4" 
                                      stroke-dasharray="500" stroke-dashoffset="500" stroke-linecap="round" />
                                
                                <!-- 装饰光效 -->
                                <circle id="glow-left" cx="-150" cy="0" r="50" fill="url(#glow)" opacity="0" />
                                <circle id="glow-right" cx="150" cy="0" r="50" fill="url(#glow)" opacity="0" />
                                
                                <!-- 控制按钮 -->
                                <rect id="control-button" x="250" y="-30" width="20" height="10" rx="5" 
                                      fill="none" stroke="#0ea5e9" stroke-width="2" 
                                      stroke-dasharray="60" stroke-dashoffset="60" />
                            </g>
                            
                            <!-- Chimeta文字Logo -->
                            <text id="chimeta-logo" x="300" y="70" text-anchor="middle" dominant-baseline="middle" 
                                  font-family="'Noto Sans SC', Arial, sans-serif" font-size="42" font-weight="bold"
                                  fill="url(#text-gradient)" filter="url(#text-shadow)"
                                  class="logo-text" opacity="0">智能眼镜</text>
                            
                            <!-- 统计数据 -->
                            <g id="about-stats" opacity="0">
                                <g transform="translate(70, 103)">
                                    <text class="stat-number" x="0" y="0" font-size="22" fill="#3b82f6" font-weight="bold">沉浸式玩法</text>
                                    <!-- <text x="0" y="25" font-size="14" fill="white">月活跃用户</text> -->
                                </g>
                                <g transform="translate(530, 103)">
                                    <text class="stat-number" x="0" y="0" text-anchor="end" font-size="22" fill="#3b82f6" font-weight="bold">虚实结合</text>
                                    <!-- <text x="0" y="25" text-anchor="end" font-size="14" fill="white">应用和服务</text> -->
                                </g>
                                <g transform="translate(70, 305)">
                                    <text class="stat-number" x="0" y="0" font-size="22" fill="#8b5cf6" font-weight="bold">情感陪伴</text>
                                    <!-- <text x="0" y="25" font-size="14" fill="white">国家覆盖</text> -->
                                </g>
                                <g transform="translate(530, 305)">
                                    <text class="stat-number" x="0" y="0" text-anchor="end" font-size="22" fill="#8b5cf6" font-weight="bold">社交互动</text>
                                    <!-- <text x="0" y="25" text-anchor="end" font-size="14" fill="white">开发者与创作者</text> -->
                                </g>
                            </g>
                            
                            <!-- 装饰小点和线条 -->
                            <circle id="dot-1" cx="60" cy="103" r="4" fill="#3b82f6" opacity="0" />
                            <circle id="dot-2" cx="540" cy="103" r="4" fill="#8b5cf6" opacity="0" />
                            <circle id="dot-3" cx="60" cy="305" r="4" fill="#8b5cf6" opacity="0" />
                            <circle id="dot-4" cx="540" cy="305" r="4" fill="#3b82f6" opacity="0" />
                            
                            <line id="line-1" x1="60" y1="103" x2="30" y2="73" stroke="#3b82f6" stroke-width="2" 
                                  stroke-dasharray="60" stroke-dashoffset="60" />
                            <line id="line-2" x1="540" y1="103" x2="570" y2="73" stroke="#8b5cf6" stroke-width="2" 
                                  stroke-dasharray="60" stroke-dashoffset="60" />
                            <line id="line-3" x1="60" y1="305" x2="30" y2="335" stroke="#8b5cf6" stroke-width="2" 
                                  stroke-dasharray="60" stroke-dashoffset="60" />
                            <line id="line-4" x1="540" y1="305" x2="570" y2="335" stroke="#3b82f6" stroke-width="2" 
                                  stroke-dasharray="60" stroke-dashoffset="60" />
                        </svg>
                    </div>
                </div>
            </div>
            
            <!-- 新增视频展示区域 -->
            <div class="mt-12 mb-2 w-full">
                <!-- 添加智能眼镜文字 -->
                <div class="text-center mb-8">
                    <text class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500 filter drop-shadow-lg">
                        演示视频
                    </text>
                </div>
                <div class="max-w-3xl mx-auto rounded-xl overflow-hidden shadow-2xl">
                    <video class="w-full" controls controlslist="nodownload" loop muted id="promo-video" preload="metadata" poster="">
                        <source src="https://chimeta-resources.oss-cn-hangzhou.aliyuncs.com/website/static/cardShow.mp4" type="video/mp4">
                        您的浏览器不支持视频播放。
                    </video>
                </div>
            </div>
            
            <!-- 删除所有VR特效样式和定义 -->
        </div>
    </section>

    <!-- Features区块 - 常规滚动动画 -->
    <section id="features" class="section bg-gray-950 py-8">
        <div class="container mx-auto px-6 py-8">
            <div class="text-center mb-10">
                <h2 class="text-4xl font-bold mb-4 opacity-0 transform translate-y-10" id="features-title">
                    <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-indigo-500">
                        全流程服务
                    </span>
                </h2>
                <!-- <p class="text-xl text-gray-400 max-w-3xl mx-auto opacity-0 transform translate-y-10" id="features-subtitle">
                    搭载尖端混合现实技术，为您带来前所未有的沉浸式空间计算体验
                </p> -->
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-8">
                <!-- 功能卡片1 - 整体解决方案设计 -->
                <div class="features-card p-6" id="feature-1">
                    <div class="w-16 h-16 mb-6 flex items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-blue-700">
                        <svg class="w-8 h-8 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold mb-3 text-white">整体解决方案设计</h3>
                    <p class="text-gray-400">根据您的需求量身打造整体方案，软硬件选型，技术架构设计</p>
                </div>
                
                <!-- 功能卡片2 - 软件定制开发 -->
                <div class="features-card p-6" id="feature-2">
                    <div class="w-16 h-16 mb-6 flex items-center justify-center rounded-xl bg-gradient-to-br from-indigo-500 to-indigo-700">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold mb-3 text-white">软件定制开发</h3>
                    <p class="text-gray-400">基于先进的技术，和您的IP深度融合，打造生动的沉浸式交互内容</p>
                </div>
                
                <!-- 功能卡片3 - 硬件个性化 -->
                <div class="features-card p-6" id="feature-3">
                    <div class="w-16 h-16 mb-6 flex items-center justify-center rounded-xl bg-gradient-to-br from-purple-500 to-purple-700">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 9a2 2 0 012-2h6a2 2 0 012 2v6a2 2 0 01-2 2H9a2 2 0 01-2-2V9z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold mb-3 text-white">硬件个性化</h3>
                    <p class="text-gray-400">定制结合您的IP主题和应用场景，打造风格契合的硬件产品。</p>
                </div>
                
                <!-- 功能卡片4 - 售后服务 -->
                <div class="features-card p-6" id="feature-4">
                    <div class="w-16 h-16 mb-6 flex items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-purple-700">
                        <svg class="w-8 h-8 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
                        </svg>
                    </div>
                    <h3 class="text-xl font-semibold mb-3 text-white">售后服务</h3>
                    <p class="text-gray-400">提供完善的售后技术支持，包括整体技术运维，产品保障服务等</p>
                </div>
               
            </div>
            
           
        </div>
    </section>

    
    <!-- 联系区块 -->
    <section id="contact" class="section bg-gray-950 py-1">
        <div class="container mx-auto px-6 py-1">
            <div class="flex flex-wrap -mx-4">
                <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
                    <h2 class="text-4xl font-bold mb-6 opacity-0 transform translate-y-10" id="contact-title">
                        <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-indigo-500">
                            联系我们
                        </span>
                    </h2>
                    <p class="text-lg text-gray-400 mb-8 opacity-0 transform translate-y-10" id="contact-text">
                        无论您是想了解产品详情，还是需要技术支持，我们的团队随时为您提供帮助
                    </p>
                    
                    <div class="space-y-6 opacity-0 transform translate-y-10" id="contact-info">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 mt-1">
                                <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                                </svg>
                            </div>
                            <div class="ml-4">
                                <p class="text-white font-medium">电子邮件</p>
                                <p class="text-gray-400">info@chimeta.com</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="flex-shrink-0 mt-1">
                                <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                                </svg>
                            </div>
                            <div class="ml-4">
                                <p class="text-white font-medium">商务合作</p>
                                <p class="text-gray-400">021-50361598</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="flex-shrink-0 mt-1">
                                <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                </svg>
                            </div>
                            <div class="ml-4">
                                <p class="text-white font-medium">公司地址</p>
                                <p class="text-gray-400">上海市青浦区崧泽大道333号国家会展中心B栋办公楼6层616室</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- <div class="mt-10 opacity-0 transform translate-y-10" id="social-links">
                        <p class="text-white font-medium mb-4">关注我们</p>
                        <div class="flex space-x-4">
                            <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-600 transition-colors">
                                <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z"/>
                                </svg>
                            </a>
                            <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-800 transition-colors">
                                <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.879V14.89h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.989C18.343 21.129 22 16.99 22 12c0-5.523-4.477-10-10-10z"/>
                                </svg>
                            </a>
                            <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-red-600 transition-colors">
                                <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/>
                                </svg>
                            </a>
                            <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gradient-to-r from-purple-600 to-pink-600 transition-colors">
                                <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12 2c2.717 0 3.056.01 4.122.06 1.065.05 1.79.217 2.428.465.66.254 1.216.598 1.772 1.153a4.908 4.908 0 0 1 1.153 1.772c.247.637.415 1.363.465 2.428.047 1.066.06 1.405.06 4.122 0 2.717-.01 3.056-.06 4.122-.05 1.065-.218 1.79-.465 2.428a4.883 4.883 0 0 1-1.153 1.772 4.915 4.915 0 0 1-1.772 1.153c-.637.247-1.363.415-2.428.465-1.066.047-1.405.06-4.122.06-2.717 0-3.056-.01-4.122-.06-1.065-.05-1.79-.218-2.428-.465a4.89 4.89 0 0 1-1.772-1.153 4.904 4.904 0 0 1-1.153-1.772c-.248-.637-.415-1.363-.465-2.428C2.013 15.056 2 14.717 2 12c0-2.717.01-3.056.06-4.122.05-1.066.217-1.79.465-2.428a4.88 4.88 0 0 1 1.153-1.772A4.897 4.897 0 0 1 5.45 2.525c.638-.248 1.362-.415 2.428-.465C8.944 2.013 9.283 2 12 2zm0 1.802c-2.67 0-2.986.01-4.04.059-.976.045-1.505.207-1.858.344-.466.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882.344 1.857-.048 1.055-.058 1.37-.058 4.04 0 2.669.01 2.986.058 4.04.045.976.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.04.058 2.67 0 2.986-.01 4.04-.058.976-.045 1.504-.207 1.857-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.054.058-1.37.058-4.04 0-2.67-.01-2.986-.058-4.04-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 0 0-.748-1.15 3.098 3.098 0 0 0-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.054-.048-1.37-.058-4.04-.058zm0 3.063a5.135 5.135 0 1 1 0 10.27 5.135 5.135 0 0 1 0-10.27zm0 8.468a3.333 3.333 0 1 0 0-6.666 3.333 3.333 0 0 0 0 6.666zm6.538-8.469a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0z"/>
                                </svg>
                            </a>
                        </div>
                    </div> -->
                </div>
                
                <div class="w-full lg:w-1/2 px-4">
                    <div class="bg-gray-900 rounded-xl p-8 opacity-0 transform translate-y-10" id="contact-form">
                        <h3 class="text-2xl font-semibold mb-6 text-white">发送消息</h3>
                        <form id="contactForm">
                            <div class="mb-6">
                                <label for="name" class="block text-sm font-medium text-gray-400 mb-2">您的姓名</label>
                                <input type="text" id="name" name="name" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:border-blue-500 text-white">
                            </div>
                            <div class="mb-6">
                                <label for="phone" class="block text-sm font-medium text-gray-400 mb-2">联系电话</label>
                                <input type="tel" id="phone" name="phone" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:border-blue-500 text-white">
                            </div>
                            <div class="mb-6">
                                <label for="message" class="block text-sm font-medium text-gray-400 mb-2">您的消息</label>
                                <textarea id="message" name="message" rows="4" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:border-blue-500 text-white"></textarea>
                            </div>
                            <button type="submit" class="w-full py-3 px-4 bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-medium rounded-lg hover:shadow-lg transition-all duration-300">
                                发送消息
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 页脚 -->
    <footer class="bg-gray-950 py-12 border-t border-gray-800">
       
            
            
            <!-- 添加ICP备案信息 -->
                <div class="flex flex-col md:flex-row justify-center items-center gap-4">
                    <!-- ICP备案信息 -->
                    <p class="text-gray-500 text-sm">
                        2022-2025&copy;中数元宇数字科技（上海）有限公司版权所有 
                        <a href="https://beian.miit.gov.cn/" target="_blank" class="hover:text-blue-400 transition">沪ICP备2022001896号-1</a>
                    <!-- 企业营业执照链接 -->
                    <a href="https://wap.scjgj.sh.gov.cn/businessCheck/verifKey.do?showType=extShow&serial=9031000020221027173600000009736270-SAIC_SHOW_310000-bab423823063400f870936e621599684675&signData=MEUCIDhEApGjWwpqzm6cyLyF0CLbTG5v1aRT87hOC/+Ss+y+AiEAh1+qM2oQCkOSQyK5E+nrXvbCglR7gK5iJvgD8BDG/hU=" target="_blank" rel="noreferrer" class="hover:opacity-80 transition inline-block">
                        <img src="yyzz.png" alt="企业营业执照" height="20" style="height: 20px; width: auto;" />
                    </a>
                    </p>
                    
                    
                    
                    <!-- 官方公众号图标 (已添加到另一个位置) -->
                </div>
     
    </footer>
    
    <!-- GSAP动画脚本 -->
    <script>
        // 等待页面加载完成
        document.addEventListener('DOMContentLoaded', () => {
            // 注册GSAP插件
            gsap.registerPlugin(ScrollTrigger);
            
            // 创建网格线
            createGridLines();
            
            // 创建数据网格
            createDataGrid();
            
            // 初始化导航栏动画
            initNavAnimation();
            
            // 初始化进度条
            initProgressBar();
            
            // 初始化Hero区块SVG动画
            initHeroAnimation();
            
            // 初始化About区块动画
            initAboutAnimation();
            
            // 初始化Features区块动画
            initFeaturesAnimation();
            
            // 移除对不存在的FAQ动画的初始化
            // initFaqAnimation();
            
            // 初始化Contact区块动画
            initContactAnimation();
            
            // 初始化手风琴交互
            initAccordion();
            
            // 初始化视频播放按钮
            initVideoPlayer();
            
            // 初始化移动端菜单
            initMobileMenu();
            
            // 初始化视频封面图
            setupVideoPoster();
            
            // 隐藏加载屏幕
            hideLoadingScreen();
        });
        
        // 隐藏加载动画
        function hideLoadingScreen() {
            const loadingScreen = document.getElementById('loading-screen');
            // 给页面内容加载一些额外时间，确保所有资源都已加载
            setTimeout(() => {
                loadingScreen.style.opacity = '0';
                setTimeout(() => {
                    loadingScreen.style.visibility = 'hidden';
                }, 500);
            }, 500);
        }

        // 监听window的load事件，确保所有资源（图片、视频等）加载完毕
        window.addEventListener('load', () => {
            hideLoadingScreen();
        });
        
        // 初始化移动端菜单
        function initMobileMenu() {
            const menuButton = document.getElementById('mobile-menu-button');
            const mobileMenu = document.getElementById('mobile-menu');
            
            if (menuButton && mobileMenu) {
                menuButton.addEventListener('click', () => {
                    if (mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.remove('hidden');
                        gsap.fromTo(mobileMenu, 
                            {opacity: 0, height: 0},
                            {opacity: 1, height: 'auto', duration: 0.3}
                        );
                    } else {
                        gsap.to(mobileMenu, {
                            opacity: 0, 
                            height: 0, 
                            duration: 0.3,
                            onComplete: () => {
                                mobileMenu.classList.add('hidden');
                            }
                        });
                    }
                });
                
                // 移动端菜单项点击后自动关闭菜单
                const menuLinks = mobileMenu.querySelectorAll('a');
                menuLinks.forEach(link => {
                    link.addEventListener('click', () => {
                        gsap.to(mobileMenu, {
                            opacity: 0, 
                            height: 0, 
                            duration: 0.3,
                            onComplete: () => {
                                mobileMenu.classList.add('hidden');
                            }
                        });
                    });
                });
            }
        }
        
        // 初始化视频播放功能
        function initVideoPlayer() {
            const video = document.getElementById('promo-video');
            if (video) {
                video.controls = true;
            }
        }
        
        // 创建网格线
        function createGridLines() {
            const gridLayer = document.getElementById('grid-layer');
            const gridSize = 50;
            const viewBoxWidth = 1920;
            const viewBoxHeight = 1080;
            
            // 创建水平线
            for (let y = 0; y <= viewBoxHeight; y += gridSize) {
                const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
                line.setAttribute("x1", "0");
                line.setAttribute("y1", y);
                line.setAttribute("x2", viewBoxWidth);
                line.setAttribute("y2", y);
                line.setAttribute("stroke", "#3b82f6");
                line.setAttribute("stroke-width", "1");
                line.setAttribute("opacity", "0.1");
                gridLayer.appendChild(line);
            }
            
            // 创建垂直线
            for (let x = 0; x <= viewBoxWidth; x += gridSize) {
                const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
                line.setAttribute("x1", x);
                line.setAttribute("y1", "0");
                line.setAttribute("x2", x);
                line.setAttribute("y2", viewBoxHeight);
                line.setAttribute("stroke", "#3b82f6");
                line.setAttribute("stroke-width", "1");
                line.setAttribute("opacity", "0.1");
                gridLayer.appendChild(line);
            }
        }
        
        // 创建数据网格
        function createDataGrid() {
            const dataGrid = document.getElementById('data-grid');
            if (!dataGrid) return;
            
            const gridSize = 30;
            const centerX = 960;
            const centerY = 540;
            const radius = 300;
            
            for (let i = 0; i < 100; i++) {
                const angle = Math.random() * Math.PI * 2;
                const distance = Math.random() * radius;
                const x = centerX + Math.cos(angle) * distance;
                const y = centerY + Math.sin(angle) * distance;
                
                const dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
                dot.setAttribute("cx", x);
                dot.setAttribute("cy", y);
                dot.setAttribute("r", 1 + Math.random() * 2);
                dot.setAttribute("fill", Math.random() > 0.5 ? "#3b82f6" : "#8b5cf6");
                dot.setAttribute("opacity", 0.3 + Math.random() * 0.4);
                dataGrid.appendChild(dot);
                
                if (Math.random() > 0.7) {
                    const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
                    const angle2 = angle + (Math.random() * 0.5 - 0.25);
                    const distance2 = distance + (Math.random() * 50 - 25);
                    const x2 = centerX + Math.cos(angle2) * distance2;
                    const y2 = centerY + Math.sin(angle2) * distance2;
                    
                    line.setAttribute("x1", x);
                    line.setAttribute("y1", y);
                    line.setAttribute("x2", x2);
                    line.setAttribute("y2", y2);
                    line.setAttribute("stroke", Math.random() > 0.5 ? "#3b82f6" : "#8b5cf6");
                    line.setAttribute("stroke-width", "0.5");
                    line.setAttribute("opacity", "0.2");
                    dataGrid.appendChild(line);
                }
            }
        }
        
        // 初始化导航栏动画
        function initNavAnimation() {
            const nav = document.getElementById('main-nav');
            
            // 移除或注释掉根据滚动改变背景的逻辑
            // ScrollTrigger.create({
            //     start: "top top",
            //     end: "max",
            //     onUpdate: (self) => {
            //         if (self.direction === -1) {
            //             // 向上滚动时显示导航
            //             // nav.classList.remove('bg-gray-900/80', 'backdrop-blur-md');
            //             // nav.classList.add('bg-transparent');
            //         } else {
            //             // 向下滚动时添加背景
            //             // nav.classList.remove('bg-transparent');
            //             // nav.classList.add('bg-gray-900/80', 'backdrop-blur-md');
            //         }
            //     }
            // });
        }
        
        // 初始化整体滚动进度条
        function initProgressBar() {
            const progressBar = document.querySelector('.progress-bar');
            
            gsap.to(progressBar, {
                width: "100%",
                ease: "none",
                scrollTrigger: {
                    trigger: "body",
                    start: "top top",
                    end: "bottom bottom",
                    scrub: 0.3
                }
            });
        }
        
        // 初始化Hero区块SVG动画
        function initHeroAnimation() {
            const heroAnimation = document.getElementById('hero-animation');
            const heroSection = document.getElementById('hero');
            
            // 如果Hero区块不存在或被隐藏，则不执行动画
            if (!heroAnimation || !heroSection || heroSection.style.display === 'none') return;
            
            // 创建主时间线
            const heroTimeline = gsap.timeline({
                scrollTrigger: {
                    trigger: "#hero-animation",
                    start: "top top",
                    end: "bottom bottom",
                    scrub: true,
                    pin: true,
                    anticipatePin: 1,
                    onUpdate: (self) => {
                        // 更新进度条
                        const progress = self.progress;
                        updateSceneProgress(progress);
                    }
                }
            });
            
            // 场景1: 无人机路径动画
            const scene1 = gsap.timeline({id: "scene1"});
            scene1
                // 背景网格显示
                .to("#grid-layer", {opacity: 0.3, duration: 0.5}, 0)
                // 路径绘制动画
                .to("#drone-path-1", {strokeDashoffset: 0, duration: 2}, 0.5)
                // 标题渐入
                .to("#scene1-title", {opacity: 1, y: 0, duration: 1}, 0.8)
                .to("#scene1-subtitle", {opacity: 1, y: 0, duration: 1}, 1.0)
                // 无人机元素逐个显示
                .to("#drone-1 .drone-element", {opacity: 1, stagger: 0.1, duration: 0.5}, 1.2)
                // 无人机沿路径移动
                .to("#drone-1", {
                    motionPath: {
                        path: "#drone-path-1",
                        align: "#drone-path-1",
                        alignOrigin: [0.5, 0.5],
                        autoRotate: true
                    },
                    duration: 3,
                }, 1.5)
                // 场景文本显示
                .to("#text-1", {opacity: 1, duration: 1}, 2)
                // 光晕效果
                .to("#glow-effect", {opacity: 0.7, r: 300, duration: 2}, 1)
                .to("#glow-effect", {opacity: 0, duration: 1}, 3);
            
            // 场景2: 无人机特性展示
            const scene2 = gsap.timeline({id: "scene2"});
            scene2
                // 前一个场景淡出
                .to(["#scene1-title", "#scene1-subtitle", "#drone-path-1", "#drone-1", "#text-1"], {opacity: 0, duration: 0.5}, 0)
                // 场景2淡入
                .to("#scene-2", {opacity: 1, duration: 0.5}, 0.5)
                // 技术线逐条显示
                .to(".tech-line", {opacity: 1, stroke: "#38bdf8", strokeDashoffset: 0, stagger: 0.2, duration: 0.8}, 0.7)
                // 中央无人机显示
                .to("#drone-2 .drone-element", {opacity: 1, stagger: 0.1, duration: 0.5}, 1.0)
                // 螺旋桨旋转动画
                .to("#drone-2 .propeller", {
                    rotation: 360,
                    transformOrigin: "center",
                    repeat: 5,
                    duration: 0.5,
                    ease: "linear"
                }, 1.5)
                // 特性点显示
                .to(".feature-point", {opacity: 1, scale: 1.5, stagger: 0.2, duration: 0.3}, 1.5)
                .to(".feature-point", {scale: 1, duration: 0.2}, 1.8)
                // 特性文本显示
                .to(".feature-text", {opacity: 1, y: 0, stagger: 0.2, duration: 0.5}, 1.8)
                // 场景文本显示
                .to("#text-2", {opacity: 1, duration: 1}, 2);
            
            // 场景3: 数据可视化
            const scene3 = gsap.timeline({id: "scene3"});
            scene3
                // 前一个场景淡出
                .to(["#scene-2", "#text-2"], {opacity: 0, duration: 0.5}, 0)
                // 场景3淡入
                .to("#scene-3", {opacity: 1, duration: 0.5}, 0.5)
                // 数据网格显示
                .to("#data-grid", {opacity: 1, scale: 1, duration: 1}, 0.7)
                // 圆环动画
                .to("#data-ring-outer", {strokeDashoffset: 0, duration: 1.5}, 0.8)
                .to("#data-ring-inner", {strokeDashoffset: 0, duration: 1.5}, 1.0)
                // 数据指标逐个显示
                .to(["#metric-1", "#metric-2", "#metric-3", "#metric-4"], {
                    opacity: 1, 
                    y: 0, 
                    stagger: 0.2,
                    duration: 0.8
                }, 1.2)
                // 场景文本显示
                .to("#text-3", {opacity: 1, duration: 1}, 2)
                // 最终淡出
                .to("#scene-3", {opacity: 0, duration: 1}, 4);
            
            // 将所有场景添加到主时间线
            heroTimeline
                .add(scene1)
                .add(scene2)
                .add(scene3);
            
            // 添加螺旋桨旋转动画
            gsap.to(".drone-propellers .propeller", {
                rotation: 360,
                transformOrigin: "center",
                repeat: -1,
                duration: 0.5,
                ease: "linear"
            });
        }
        
        // 更新场景进度条和指示器
        function updateSceneProgress(progress) {
            // 分三个场景均匀划分
            const progressElem1 = document.getElementById('progress-1');
            const progressElem2 = document.getElementById('progress-2');
            const progressElem3 = document.getElementById('progress-3');
            const sceneIndicator = document.getElementById('scene-indicator');
            
            if (!progressElem1 || !progressElem2 || !progressElem3 || !sceneIndicator) return;
            
            if (progress < 0.33) {
                // 场景1
                progressElem1.style.width = (progress / 0.33 * 100) + '%';
                progressElem2.style.width = '0';
                progressElem3.style.width = '0';
                sceneIndicator.textContent = '场景1: 无人机介绍';
            } else if (progress < 0.66) {
                // 场景2
                progressElem1.style.width = '100%';
                progressElem2.style.width = ((progress - 0.33) / 0.33 * 100) + '%';
                progressElem3.style.width = '0';
                sceneIndicator.textContent = '场景2: 核心特性';
            } else {
                // 场景3
                progressElem1.style.width = '100%';
                progressElem2.style.width = '100%';
                progressElem3.style.width = ((progress - 0.66) / 0.34 * 100) + '%';
                sceneIndicator.textContent = '场景3: 性能数据';
            }
        }
        
        // 初始化About区块动画
        function initAboutAnimation() {
            // VR眼镜动画
            const vrAnimation = gsap.timeline({
                scrollTrigger: {
                    trigger: "#about",
                    start: "top 80%", // 提前触发时机
                    end: "center center", 
                    scrub: 1
                }
            });
            
            // 显示整体图形和文字
            vrAnimation
                // 统计数据 - 移到最前面显示
                .to("#about-stats", {
                    opacity: 1,
                    duration: 0.8
                }, 0)
                // 装饰点和线 - 提前显示
                .to(["#dot-1", "#dot-2", "#dot-3", "#dot-4"], {
                    opacity: 0.8,
                    stagger: 0.1,
                    duration: 0.3
                }, 0.2)
                .to(["#line-1", "#line-2", "#line-3", "#line-4"], {
                    strokeDashoffset: 0,
                    stagger: 0.1,
                    duration: 0.5
                }, 0.3)
                // 先显示logo文字
                .fromTo("#chimeta-logo", 
                     {opacity: 0, scale: 0.5},
                     {opacity: 1, scale: 1, duration: 1, ease: "power2.out"}, 0.5)
                // 先显示VR眼镜整体
                .to("#vr-glasses", {
                    opacity: 1,
                    duration: 1,
                    ease: "power2.out"
                }, 0.6)
                // VR眼镜框架绘制
                .to("#vr-frame", {
                    strokeDashoffset: 0,
                    duration: 2,
                    ease: "power1.inOut"
                }, 1)
                // 绘制镜片
                .to(["#left-lens", "#right-lens"], {
                    strokeDashoffset: 0,
                    duration: 1.5,
                    stagger: 0.2,
                    ease: "power1.inOut"
                }, 1.5)
                // 鼻梁
                .to("#nose-bridge", {
                    strokeDashoffset: 0,
                    duration: 0.5,
                    ease: "power1.inOut"
                }, 2)
                // 头带
                .to("#head-strap", {
                    strokeDashoffset: 0,
                    duration: 1.5,
                    ease: "power1.inOut"
                }, 2.2)
                // 控制按钮
                .to("#control-button", {
                    strokeDashoffset: 0,
                    duration: 0.5,
                    ease: "power1.inOut"
                }, 2.5)
                // 发光效果
                .to(["#glow-left", "#glow-right"], {
                    opacity: 0.7,
                    duration: 1,
                    stagger: 0.2
                }, 3.5);
            
            // 添加鼠标悬停动画
            const chimetaLogo = document.getElementById('chimeta-logo');
            
            if(chimetaLogo) {
                // 鼠标悬停动画
                let hoverAnimation = null;
                
                chimetaLogo.addEventListener('mouseenter', function() {
                    // 取消任何正在进行的动画
                    if(hoverAnimation) hoverAnimation.kill();
                    
                    // 创建新的放大缩小动画
                    hoverAnimation = gsap.timeline({repeat: -1})
                        .to(chimetaLogo, {
                            scale: 1.1,
                            duration: 1.5,
                            ease: "sine.inOut"
                        })
                        .to(chimetaLogo, {
                            scale: 1,
                            duration: 1.5,
                            ease: "sine.inOut"
                        });
                });
                
                chimetaLogo.addEventListener('mouseleave', function() {
                    // 如果正在动画中，取消并平滑返回到原始状态
                    if(hoverAnimation) hoverAnimation.kill();
                    
                    gsap.to(chimetaLogo, {
                        scale: 1,
                        duration: 0.5,
                        ease: "power2.out"
                    });
                });
            }
            
            // 文本动画
            gsap.timeline({
                scrollTrigger: {
                    trigger: "#about-title",
                    start: "top 80%",
                    end: "bottom 60%",
                    scrub: 1
                }
            })
            .to("#about-title", {opacity: 1, y: 0, duration: 1}, 0)
            .to("#about-text", {opacity: 1, y: 0, duration: 1}, 0.3)
            .to("#about-btn", {opacity: 1, y: 0, duration: 1}, 0.6);

            // 新增底部装饰元素的动画
            gsap.to("#about-footer-deco", {
                opacity: 1,
                y: 0,
                duration: 0.8,
                scrollTrigger: {
                    trigger: "#about-footer-deco",
                    start: "top 90%",
                    end: "bottom 70%",
                    scrub: 1
                }
            });
        }
        
        // 初始化Features区块动画
        function initFeaturesAnimation() {
            // 标题动画
            gsap.timeline({
                scrollTrigger: {
                    trigger: "#features-title",
                    start: "top 80%",
                    end: "bottom 60%",
                    scrub: 1
                }
            })
            .to("#features-title", {opacity: 1, y: 0, duration: 1}, 0)
            .to("#features-subtitle", {opacity: 1, y: 0, duration: 1}, 0.2);
            
            // 功能卡片动画
            const cards = document.querySelectorAll('.features-card');
            cards.forEach((card, index) => {
                gsap.to(card, {
                    opacity: 1,
                    y: 0,
                    duration: 0.8,
                    scrollTrigger: {
                        trigger: card,
                        start: "top 85%",
                        end: "bottom 60%",
                        scrub: 1
                    }
                });
            });
            
            // 展示区动画
            gsap.to("#feature-showcase", {
                opacity: 1,
                y: 0,
                duration: 1,
                scrollTrigger: {
                    trigger: "#feature-showcase",
                    start: "top 80%",
                    end: "center 60%",
                    scrub: 1
                }
            });
            
            // 数据线动画替换为MR眼镜动画
            gsap.timeline({
                scrollTrigger: {
                    trigger: "#feature-showcase",
                    start: "top 60%",
                    end: "bottom 40%",
                    scrub: 1,
                    repeat: -1
                }
            })
            .to(".glasses-frame", {
                strokeDashoffset: 0,
                duration: 2,
                ease: "power1.inOut"
            })
            .to(".data-point", {
                scale: 1.5,
                stagger: 0.2,
                duration: 0.5,
                repeat: -1,
                yoyo: true
            })
            .to(".glow-effect", {
                opacity: 0.4,
                scale: 1.2,
                duration: 1,
                repeat: -1,
                yoyo: true
            });
        }
        
        // 移除或修改FAQ区块动画函数
        function initFaqAnimation() {
            // 检查FAQ元素是否存在
            const faqTitle = document.getElementById('faq-title');
            const faq = document.getElementById('faq');
            
            if (!faqTitle || !faq) return; // 如果元素不存在，直接返回
            
            // 标题动画
            gsap.timeline({
                scrollTrigger: {
                    trigger: "#faq-title",
                    start: "top 80%",
                    end: "bottom 60%",
                    scrub: 1
                }
            })
            .to("#faq-title", {opacity: 1, y: 0, duration: 1}, 0)
            .to("#faq-subtitle", {opacity: 1, y: 0, duration: 1}, 0.2);
            
            // FAQ项目动画
            const items = document.querySelectorAll('.accordion-item');
            if (items.length > 0) {
                items.forEach((item, index) => {
                    gsap.fromTo(item, 
                        {opacity: 0, y: 20},
                        {
                            opacity: 1,
                            y: 0,
                            duration: 0.5,
                            delay: index * 0.1,
                            scrollTrigger: {
                                trigger: "#faq",
                                start: "top 60%",
                                end: "center center",
                                once: true
                            }
                        }
                    );
                });
            }
        }
        
        // 初始化Contact区块动画
        function initContactAnimation() {
            gsap.timeline({
                scrollTrigger: {
                    trigger: "#contact",
                    start: "top 70%",
                    end: "center center",
                    scrub: 1
                }
            })
            .to("#contact-title", {opacity: 1, y: 0, duration: 0.6}, 0)
            .to("#contact-text", {opacity: 1, y: 0, duration: 0.6}, 0.2)
            .to("#contact-info", {opacity: 1, y: 0, duration: 0.6}, 0.4)
            .to("#social-links", {opacity: 1, y: 0, duration: 0.6}, 0.6)
            .to("#contact-form", {opacity: 1, y: 0, duration: 0.6}, 0.4);
        }
        
        // 初始化手风琴交互
        function initAccordion() {
            const accordionItems = document.querySelectorAll('.accordion-item');
            
            accordionItems.forEach(item => {
                const header = item.querySelector('.accordion-header');
                const content = item.querySelector('.accordion-content');
                const arrow = item.querySelector('svg');
                
                header.addEventListener('click', () => {
                    // 关闭其他展开的手风琴
                    accordionItems.forEach(otherItem => {
                        if (otherItem !== item && otherItem.classList.contains('active')) {
                            otherItem.classList.remove('active');
                            otherItem.querySelector('svg').style.transform = 'rotate(0deg)';
                        }
                    });
                    
                    // 切换当前手风琴状态
                    const isActive = item.classList.contains('active');
                    item.classList.toggle('active');
                    
                    if (isActive) {
                        arrow.style.transform = 'rotate(0deg)';
                    } else {
                        arrow.style.transform = 'rotate(180deg)';
                    }
                });
            });
        }
        
        // 视频封面图设置
        function setupVideoPoster() {
            const video = document.getElementById('promo-video');
            if (!video) return;
            
            // 加载视频元数据
            video.addEventListener('loadeddata', function() {
                // 为了捕获第一帧，我们需要:
                // 1. 暂停视频
                // 2. 寻找到第0秒
                // 3. 创建一个canvas元素
                // 4. 将当前视频帧绘制到canvas上
                // 5. 将canvas转换为dataURL并设置为视频的poster属性
                
                // 创建canvas
                const canvas = document.createElement('canvas');
                canvas.width = video.videoWidth;
                canvas.height = video.videoHeight;
                
                // 获取canvas上下文
                const ctx = canvas.getContext('2d');
                
                // 将视频当前帧绘制到canvas上
                ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
                
                try {
                    // 将canvas内容转换为dataURL
                    const dataURL = canvas.toDataURL('image/jpeg');
                    
                    // 设置为视频的poster
                    video.setAttribute('poster', dataURL);
                    
                    // 确保视频回到初始状态
                    video.currentTime = 0;
                    video.pause();
                } catch (e) {
                    console.error('无法创建视频封面图:', e);
                }
            });
            
            // 触发加载元数据
            if (video.readyState >= 2) { // HAVE_CURRENT_DATA
                // 如果视频元数据已经加载完成，直接触发事件
                video.dispatchEvent(new Event('loadeddata'));
            } else {
                // 确保视频开始加载
                video.load();
            }
        }
    </script>
    <!-- 在body结束标签前添加新的脚本引用 -->
    <script src="static/js/three.min.js"></script>
    <script src="static/js/particles.min.js"></script>
    <script>
        // ... 保留之前的代码 ...
        
        // 初始化Three.js场景
        function initThreeScene() {
            // 检查容器元素是否存在
            const container = document.getElementById('three-container');
            if (!container) return;
            
            // 三维场景代码...
        }
        
        // 初始化粒子效果
        function initParticles() {
            // 检查容器元素是否存在
            const particlesContainer = document.getElementById('particles-js');
            if (!particlesContainer) return;
            
            // 粒子效果代码...
        }
        
        // 初始化性能卡片动画
        function initPerformanceCards() {
            // 检查性能卡片是否存在
            const cards = document.querySelectorAll('.performance-card');
            if (cards.length === 0) return;
            
            // 卡片动画代码...
        }
        
        // 在文档加载完成后初始化所有效果
        document.addEventListener('DOMContentLoaded', () => {
            // 检查元素是否存在后再调用
            const threeContainer = document.getElementById('three-container');
            const particlesContainer = document.getElementById('particles-js');
            const performanceCards = document.querySelectorAll('.performance-card');
            
            if (threeContainer) initThreeScene();
            if (particlesContainer) initParticles();
            if (performanceCards.length > 0) initPerformanceCards();
        });
    </script>
    <script>
        // ... existing code ...

        // 添加表单提交和手机号验证处理
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('contactForm');
            const phoneInput = document.getElementById('phone');
            
            // 手机号验证函数
            function validatePhone(phone) {
                const phoneRegex = /^1[3-9]\d{9}$/;
                return phoneRegex.test(phone);
            }
            
            // 手机号输入验证
            phoneInput.addEventListener('input', function(e) {
                const phone = e.target.value;
                if (phone && !validatePhone(phone)) {
                    phoneInput.style.borderColor = '#ef4444';
                } else {
                    phoneInput.style.borderColor = '#374151';
                }
            });
            
            // 表单提交处理
            form.addEventListener('submit', async function(e) {
                e.preventDefault();
                
                const name = document.getElementById('name').value;
                const phone = document.getElementById('phone').value;
                const message = document.getElementById('message').value;
                
                // 验证手机号
                if (!validatePhone(phone)) {
                    phoneInput.style.borderColor = '#ef4444';
                    return;
                }
                
                try {
                    const response = await fetch('https://api-test.chimeta.com/api/backend/business/submitContactInfo', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            name,
                            phone,
                            message
                        })
                    });
                    
                    const data = await response.json();
                    
                    // 创建弹窗容器
                    const modal = document.createElement('div');
                    modal.className = 'fixed inset-0 flex items-center justify-center z-50';
                    modal.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
                    
                    // 创建弹窗内容
                    const modalContent = document.createElement('div');
                    modalContent.className = 'bg-gray-800 rounded-lg p-6 shadow-xl transform transition-all duration-300 scale-95 opacity-0';
                    
                    // 根据返回状态设置提示内容
                    if (data.code === 200) {
                        modalContent.innerHTML = `
                            <div class="text-center">
                                <svg class="w-12 h-12 text-green-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                <h3 class="text-xl font-semibold text-white mb-2">提交成功</h3>
                            </div>
                        `;
                        // 清空表单
                        form.reset();
                        phoneInput.style.borderColor = '#374151';
                    } else {
                        modalContent.innerHTML = `
                            <div class="text-center">
                                <svg class="w-12 h-12 text-red-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                                <h3 class="text-xl font-semibold text-white mb-2">提交失败，请联系客服</h3>
                            </div>
                        `;
                    }
                    
                    modal.appendChild(modalContent);
                    document.body.appendChild(modal);
                    
                    // 显示弹窗动画
                    setTimeout(() => {
                        modalContent.style.transform = 'scale(1)';
                        modalContent.style.opacity = '1';
                    }, 100);
                    
                    // 2秒后关闭弹窗
                    setTimeout(() => {
                        modalContent.style.transform = 'scale(0.95)';
                        modalContent.style.opacity = '0';
                        setTimeout(() => {
                            document.body.removeChild(modal);
                        }, 300);
                    }, 2000);
                    
                } catch (error) {
                    console.error('提交失败:', error);
                    // 显示错误弹窗
                    const modal = document.createElement('div');
                    modal.className = 'fixed inset-0 flex items-center justify-center z-50';
                    modal.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
                    
                    const modalContent = document.createElement('div');
                    modalContent.className = 'bg-gray-800 rounded-lg p-6 shadow-xl transform transition-all duration-300 scale-95 opacity-0';
                    modalContent.innerHTML = `
                        <div class="text-center">
                            <svg class="w-12 h-12 text-red-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                            <h3 class="text-xl font-semibold text-white mb-2">提交失败，请联系客服</h3>
                        </div>
                    `;
                    
                    modal.appendChild(modalContent);
                    document.body.appendChild(modal);
                    
                    // 显示弹窗动画
                    setTimeout(() => {
                        modalContent.style.transform = 'scale(1)';
                        modalContent.style.opacity = '1';
                    }, 100);
                    
                    // 2秒后关闭弹窗
                    setTimeout(() => {
                        modalContent.style.transform = 'scale(0.95)';
                        modalContent.style.opacity = '0';
                        setTimeout(() => {
                            document.body.removeChild(modal);
                        }, 300);
                    }, 2000);
                }
            });
        });

        // ... existing code ...
    </script>
</body>
</html> 